<script setup>

import {ref,onMounted} from "vue";
//引入api
import {queryForwarderQuote} from "@/api/forwarderInquiry.js";
//引入路由
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";
//路由实例
const router=useRouter();
//分页信息
const page=ref(1);//当前页
const pageSize=ref(10);//每页记录数
const total=ref(0);//总记录数
//表格数据
const tableData = ref([])
//每页记录数变化
function chgsize(size){
  //更改每页记录数
  pageSize.value=size;
  //从每页开始查询
  page.value=1;
  //查询数据
  initDate();
}
//页面发生变化
function chgpg(pg){
  //更改当前页
  page.value=pg;
  //查询数据
  initDate();
}

const forwarderQuote=ref({
  ID: "",
  quote_coding: "",
  quotation: "",
  destination_coding: "",
  transport_way: "",
  terms:"",
  rmb: "",
  usd: "",
  endport:"",
  validity_period:"",
  transportation_total:"",
  shipping_company:"",
  voyage:"",
  voyage_distance:"",
  screenshot:"",
  status:"",
  type:"",
  reason:"",
  is_default:"",
  destination_date:"",
  notes:"2222"
});

//添加货代报价详情
function add(){
  router.push("/forwarderInquiry/AddDestination");
}

//修改货代报价
function update(destination_coding){
  router.push({path:"/forwarderInquiry/UpdateDestination",query:{destination_coding}})
}
//重置
function reset() {
  forwarderQuote.value= {
    destination_coding: ""
  };
  initDate();
}
//查询数据
async function initDate() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    destination_coding: forwarderQuote.value.destination_coding
  };
  let res = await queryForwarderQuote(data);
  if (res.code === 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }else {
    ElMessage({
      message: "查询失败",
      type: "error"
    })
  }
}
//生命周期 钩子
onMounted(()=>{
  initDate();
})
</script>

<template>
  <div>
    <div style="margin-top: 20px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="报价编码:">
            <el-input v-model="forwarderQuote.destination_coding"
                      placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-button type="primary" @click="initDate" >查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-row>

    </div>
    <div>
      <!--    客户列表-->
      <el-table :data="tableData" style="width: 100%" stripe border>
        <el-table-column type="index" label="行号" width="80" header-align="center" align="center"/>
        <el-table-column prop="destination_coding" label="报价编码" width="150" header-align="center"/>
        <el-table-column prop="ID" label="货代" width="150" header-align="center"/>
        <el-table-column prop="destination_date" label="报价时间" width="200" header-align="center"/>
        <el-table-column prop="is_default" label="默认报价" width="150" header-align="center">
          <template v-slot="{row}">
            <span v-if="row.is_default===1">默认</span>
            <span v-else-if="row.is_default===2">非默认</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="150" header-align="center">
          <template v-slot="{row}">
            <span v-if="row.type===1">砍价退单</span>
            <span v-else-if="row.type===2">信息错误退单</span>
            <span v-else-if="row.type===3">更新出运</span>
          </template>
        </el-table-column>
        <el-table-column prop="notes" label="备注" width="150" header-align="center"/>
        <el-table-column label="操作" header-align="center" align="center">
          <template v-slot="{row}">
            <el-button type="primary" @click="add(row)">增加报价</el-button>
            <el-button type="primary" @click="update(row.destination_coding)">报价详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div style="background-color: white ; height: 50px;line-height: 50px">
        <el-pagination
          background
          :page-size="pageSize"
          layout="total, sizes, ,prev, pager, next ,jumper"
          :total="total"
          @size-change="chgsize"
          @current-change="chgpg"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>

